<template>
    <div :class="dataOptions.dvModel == 1 ? 'sm-app-data-ly' : 'sm-app-data-super'" :style="dataOptions.dvContentStyle">
        <div class="dv-wrapper">
            <header class="dv-main-font" :style="{ 'font-size': dataOptions.dvMainFontSize }">全省</header>
            <section class="dv-group-layout">
                <div class="dv-useal-font" :style="{ 'font-size': dataOptions.dvUsealFontSize }">
                    <div>问题量（万条）</div>
                    <div class="dv-font" :style="{ 'font-size': dataOptions.dvFontSize }">{{
                        addThousandsSeparator(info.num_question || 0) }}</div>
                </div>
                <div class="dv-useal-font" :style="{ 'font-size': dataOptions.dvUsealFontSize }">
                    <div>业务量（万条）</div>
                    <div class="dv-font" :style="{ 'font-size': dataOptions.dvFontSize }">{{
                        addThousandsSeparator(info.num_businesss || 0) }}</div>
                </div>
            </section>
        </div>

        <div class="dv-wrapper">
            <header class="dv-main-font" :style="{ 'font-size': dataOptions.dvMainFontSize }">其中：省本级</header>
            <section class="dv-group-layout">
                <div class="dv-useal-font" :style="{ 'font-size': dataOptions.dvUsealFontSize }">
                    <div>问题量（万条）</div>
                    <div class="dv-font" :style="{ 'font-size': dataOptions.dvFontSize }">{{
                        addThousandsSeparator(info.num_question_sbj || 0) }}</div>
                </div>
                <div class="dv-useal-font" :style="{ 'font-size': dataOptions.dvUsealFontSize }">
                    <div>业务量（万条）</div>
                    <div class="dv-font" :style="{ 'font-size': dataOptions.dvFontSize }">{{
                        addThousandsSeparator(info.num_businesss_sbj || 0) }}</div>
                </div>
            </section>
        </div>
    </div>
</template>

<script setup>
import { addThousandsSeparator } from '@/utils/formatter.js';

const props = defineProps({
    info: { type: Object, default: () => ({}) },
    dataOptions: {
        type: Object,
        default: () => {
            return {
                dvModel: 1,
                dvContentStyle: '',
                dvMainFontSize: '0.20rem',
                dvUsealFontSize: '0.14rem',
                dvFontSize: '0.24rem',
            }
        }
    }

})

</script>
<style lang="less" scoped>
@import url("../../../../assets/style/data-view.less");

.sm-app-data-ly {
    text-align: left;
    width: 4.2rem;
    padding-right: 0.16rem;

    .dv-wrapper {
        padding-bottom: 0.16rem;
        margin-bottom: 0.16rem;

        &:first-child {
            box-shadow: inset 0 -1px 0 0 rgba(108, 128, 151, 0.5);
        }

        .dv-useal-font {
            &:not(:last-child) {
                margin-right: 0.16rem;
            }

            .dv-font {
                margin-top: 0.05rem;
            }
        }
    }
}


.sm-app-data-super {
    text-align: left;
    width: 4.2rem;
    padding-right: 0.16rem;
    width: 100%;

    .dv-wrapper {
        width: 50%;
        padding-bottom: 0.20rem;
        margin-bottom: 0.20rem;

        &:nth-child(1) {
            padding-right: 0.2rem;
            border-right: 1px solid rgba(108, 128, 151, 0.5);
        }

        &:nth-child(2) {
            padding-left: 0.2rem;
        }

        .dv-font {
            padding-top: 0.05rem;
        }
    }
}
</style>